<template>
  <!--物料入库状态-->
  <div class="material_storage_status">
    <span class="block_label_color mad_label"
          :class="stateColor">{{data.storeStatusLabel}}</span>
  </div>
</template>

<script>
export default {
  name: 'MaterialStorageStatus',
  props: {
    data: Object
  },
  computed: {
    stateColor() {
      switch (this.data.storeStatusValue) {
        case 'ToBeStored':
          return 'material_storage_status_wait'
        case 'Stroed':
          return 'material_storage_status_finished'
        case 'Cancel':
          return 'material_storage_status_cancel'
        case 'Fail':
          return 'material_storage_status_fail'
      }
    }
  }
}
</script>

<style lang="less" scoped>
  // 待入库
  @MaterialStorageStatusWait: #00b4ff;
  // 已入库
  @MaterialStorageStatusFinished: #00a949;
  // 已撤销
  @MaterialStorageStatusCancel: #7e8e9f;
  // 失败
  @MaterialStorageStatusFail: #f8000f;
  .material_storage_status{
    .block_label_color{
      // 待入库
      &.material_storage_status_wait{
        background-color: @MaterialStorageStatusWait;
      }
      // 已入库
      &.material_storage_status_finished{
        background-color: @MaterialStorageStatusFinished;
      }
      // 已撤销
      &.material_storage_status_cancel{
        background-color: @MaterialStorageStatusCancel;
      }
      // 失败
      &.material_storage_status_fail{
        background-color: @MaterialStorageStatusFail;
      }
    }
  }
</style>
